<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Tooplate">
    <link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
          rel="stylesheet">

    <title>文物展览系统 - 用户信息管理</title>

    <!-- Additional CSS Files -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/owl-carousel.css">
    <link rel="stylesheet" href="/assets/css/tooplate-artxibition.css">

    <style>
        .management-header {
            background-color: #f8f9fa;
            padding: 20px 0;
            margin-bottom: 30px;
        }
        .search-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
    </style>
</head>

<body>
<!-- ***** Pre Header ***** -->
<div th:replace="Header"></div>

<!-- 管理页面头部 -->
<div class="management-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2>用户信息管理</h2>
                <span>管理系统注册用户信息</span>
            </div>
        </div>
    </div>
</div>

<!-- 搜索和操作区域 -->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="search-box">
                <div class="row">
                    <div class="col-lg-3">
                        <input type="text" class="form-control" placeholder="用户名">
                    </div>
                    <div class="col-lg-3">
                        <input type="text" class="form-control" placeholder="手机号">
                    </div>
                    <div class="col-lg-3">
                        <select class="form-control">
                            <option>所有状态</option>
                            <option>正常</option>
                            <option>禁用</option>
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <button class="main-dark-button btn-block">
                            <i class="fa fa-search"></i> 搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户列表 -->
    <div class="row">
        <div class="col-lg-12">
            <div class="table-container">
                <table class="table table-hover">
                    <thead class="thead-dark">
                    <tr>
                        <th>用户ID</th>
                        <th>头像</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>注册时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.id}">1001</td>
                        <td>
                            <img th:src="${user.avatar}" src="/assets/images/user-avatar.jpg"
                                 alt="用户头像" class="user-avatar">
                        </td>
                        <td th:text="${user.username}">zhangsan</td>
                        <td th:text="${user.phone}">138****1234</td>
                        <td th:text="${user.email}">zhangsan@example.com</td>
                        <td th:text="${user.createTime}">2024-01-15</td>
                        <td>
                            <span class="badge badge-success" th:if="${user.status}">正常</span>
                            <span class="badge badge-danger" th:unless="${user.status}">禁用</span>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-primary">
                                <i class="fa fa-edit"></i> 编辑
                            </button>
                            <button class="btn btn-sm btn-warning" th:if="${user.status}">
                                <i class="fa fa-ban"></i> 禁用
                            </button>
                            <button class="btn btn-sm btn-success" th:unless="${user.status}">
                                <i class="fa fa-check"></i> 启用
                            </button>
                            <button class="btn btn-sm btn-info">
                                <i class="fa fa-history"></i> 日志
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <ul>
                    <li><a href="#">上一页</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 用户详情模态框 -->
<div class="modal fade" id="userDetailModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">用户详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <img src="/assets/images/user-avatar.jpg" alt="用户头像" class="img-fluid rounded-circle mb-3" style="max-width: 150px;">
                        <h5>张三</h5>
                        <p class="text-muted">注册用户</p>
                    </div>
                    <div class="col-md-8">
                        <div class="row mb-3">
                            <div class="col-6"><strong>用户名:</strong> zhangsan</div>
                            <div class="col-6"><strong>手机号:</strong> 138****1234</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-6"><strong>邮箱:</strong> zhangsan@example.com</div>
                            <div class="col-6"><strong>注册时间:</strong> 2024-01-15</div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-6"><strong>最后登录:</strong> 2024-01-20 14:30</div>
                            <div class="col-6"><strong>登录次数:</strong> 156</div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <strong>用户统计:</strong>
                                <div class="mt-2">
                                    <span class="badge badge-primary mr-2">收藏: 12</span>
                                    <span class="badge badge-success mr-2">评价: 8</span>
                                    <span class="badge badge-info mr-2">预约: 5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="footer"></div>

<!-- jQuery -->
<script src="/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="/assets/js/popper.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script src="/assets/js/scrollreveal.min.js"></script>
<script src="/assets/js/waypoints.min.js"></script>
<script src="/assets/js/jquery.counterup.min.js"></script>
<script src="/assets/js/imgfix.min.js"></script>
<script src="/assets/js/mixitup.js"></script>
<script src="/assets/js/accordions.js"></script>
<script src="/assets/js/owl-carousel.js"></script>
<!-- Global Init -->
<script src="/assets/js/custom.js"></script>

<script>
    $(document).ready(function() {
        // 用户管理页面初始化
        $('.btn-info').click(function() {
            $('#userDetailModal').modal('show');
        });
    });
</script>
</body>
</html>